<template>
  <div class="default-main ba-table-box">
    <div class="block">
      <div class="table-block">
        <el-alert class="ba-table-alert"
                  v-if="baTable.table.remark"
                  :title="baTable.table.remark"
                  type="info"
                  show-icon />
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                     :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
          <template #month>
            <el-date-picker v-model="baTable.comSearch.form['date']"
                            type="month"
                            placeholder="选择月份"
                            value-format="YYYY-MM" />
          </template>
          <template #shop>
            <el-select filterable
                       v-model="baTable.comSearch.form['shop_id']"
                       clearable>
              <el-option v-for="item in shop_arr"
                         :key="item.shop_id"
                         :label="item.shop_name"
                         :value="item.shop_id">
              </el-option>
            </el-select>
          </template>
        </TableHeader>
        <!-- <el-row style="margin: 10px 0;"
                :gutter="10"> -->
          <el-row :span="1.5"
          style="margin: 10px 0;"
                  v-if="baTable.auth('oldImport')">
            <el-popover placement="right"
                        title="上传"
                        :width="500"
                        trigger="click">
              <template #reference>
                <el-button type="primary">
                  上传老模版格式数据
                </el-button>
              </template>
              <el-upload ref="upload"
                         class="upload-demo"
                         action=""
                         :show-file-list="false"
                         @change="onUploadOld"
                         drag
                         :auto-upload="false">
                <Icon name="el-icon-UploadFilled"
                      color="#a8abb2"
                      size="30px" />
                <div>拖拽文件到此或者点击上传</div>
              </el-upload>
            </el-popover>
          </el-row>
          <el-row :span="1.5"
          style="margin: 10px 0;"
                  v-if="baTable.auth('newImport')">
            <el-popover placement="right"
                        title="上传"
                        :width="500"
                        trigger="click">
              <template #reference>
                <el-button type="primary">
                  上传新模版格式数据
                </el-button>
              </template>
              <el-upload ref="upload"
                         class="upload-demo"
                         action=""
                         :show-file-list="false"
                         @change="onUploadNew"
                         drag
                         :auto-upload="false">
                <Icon name="el-icon-UploadFilled"
                      color="#a8abb2"
                      size="30px" />
                <div>拖拽文件到此或者点击上传</div>
              </el-upload>
            </el-popover>
          </el-row>
        <!-- </el-row> -->
        <Table></Table>
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { ref, reactive, provide, onBeforeMount, markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import sourcecol from './sourcecol.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi, fileDownload } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
import { concat } from 'lodash-es'
import { getShopList } from '/@/api/backend/common'
import { oldFileUpload, newFileUpload } from '/@/api/backend/checkbill/CheckMonthFee'

defineOptions({
    name: 'checkbill/CheckMonthFee',
})
const { t } = useI18n()
const shop_arr = ref([] as any[])
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})
const adminInfo = useAdminInfo()
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'Info',
        text:  '详情',
        type: 'primary',
        icon: '',
        class: 'newButton',
        disabledTip: false,
        click: (row: TableRow) => {
            // curRow.value = { ...row }
            // detailCom.value.show = true
        }
    }
]
optButtons = concat(defaultOptButtons(['edit', 'delete']), optButtons)
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}

const baTable = new baTableClass(
    new baTableApi('/checkbill/CheckMonthFee/'),
    {
        column: [
            {
                label: '结算月份',
                prop:  'date',
                operator: '=', 
                align: 'center',
                comSearchRender:'slot',
                comSearchSlotName: 'month',
            },
            {
                label: '店铺',
                prop:  'shop_id',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'shop',
                show: false
            },
            {   
                label: '店铺',
                prop: 'shop_name', 
                align: 'center',
                operator: false
            },
            {   
                label: '导入状态', 
                prop: 'import_status', 
                align: 'center',
                operator: false
            },
            {   
                label: '数据地址', 
                prop: 'source_url', 
                align: 'center',
                operator: false,
                render: 'customRender', 
                customRender: markRaw(sourcecol)
            },
            { 
                label: '创建时间', 
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom', 
                operator: false
            },
            // {
            //     label: t('Operate'),
            //     align: 'center',
            //     width: '100',
            //     render: 'buttons',
            //     buttons: optButtons,
            //     operator: false
            // }
        ],
        dblClickNotEditColumn: ['all'],
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

const onUploadOld = (file:any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    oldFileUpload(fd).then((res) => {
        if (res.code == 200) {
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            ElMessage ({
                type: 'error',
                message: '上传失败',
            })
        }
    })
}

const onUploadNew = (file:any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    newFileUpload(fd).then((res) => {
        if (res.code == 200) {
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            ElMessage ({
                type: 'error',
                message: '上传失败',
            })
        }
    })
}

const getShopArr = () => {
    getShopList().then(res => {
        if(res.data && res.data.list.length) {
            shop_arr.value = res.data.list
        }
    })
}

onBeforeMount(() => {
    getShopArr()
})
</script>

<style scoped lang="scss">
:deep(.el-date-editor.el-input){
    width: var(--el-input-width);
}
:deep(.el-upload-dragger){
    padding: 100px 10px;
}
</style>
    